import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Planet, SwitchModes } from '@worktile/planet';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  title = 'address';
  // 依赖注入就是告诉angular要想组件正常运行需要哪些依赖 ，所以依赖注入是组件专有
constructor(private router: Router,
            private active: ActivatedRoute,
            private planet: Planet) {

}

get loadingDone() {

  return this.planet.loadingDone;
}
routerListener1
ngOnInit( ): void {
  this.routerListener1 = this.active.queryParamMap.subscribe( (map) => {
    console.log(map, 'querayParamsmap');
  })
  this.active.queryParams.subscribe( (values) => {
    console.log(values, 'queryParams');
  })
  this.active.paramMap.subscribe((map) => {
    console.log(map, 'paramMap');
    
  })
  this.active.params.subscribe((vals) => {
    console.log(vals, 'params');
    
  })
  const {paramMap, params, queryParamMap, queryParams} = this.active.snapshot ;
  // params 是动态路由参数 而且是必须有   queryparms 是？后面拼接的参数 Map比queryparams 多了一层，

  console.log(paramMap, params, queryParamMap, queryParams);
}
ngAfterViewInit( ): void {

  this.planet.setOptions({
    switchMode: SwitchModes.coexist,
    errorHandler: error => {
      console.error(`Failed to load resource, error:`, error);
     }
   });
   /* 这个只能调用一次 */

  this.planet.registerApps([
 // {
 //   name: 'spa1',
 //   hostParent: '#spa',
 //   hostClass: '.spa',
 //   routerPathPrefix: '/spa',
 //   preload: true ,
 //   /* 这个选择器 会直接createElement */
 //   selector: 'app-root-web',
 //   scripts: [
 //   '/spa/main.js'
 //   ],
 //   styles: [
 //       '/spa/styles.css'
 //   ]
 // },
//  {
//     name: 'workflow',                 //  对应子应用 defineApplication
//     hostParent: '#workflow-app',          // 子应用的父级容器
//     hostClass: '.spa',          // 子应用的额外css类名
//     routerPathPrefix: 'angular9',
//     preload: true ,
//     /* 这个选择器 会直接createElement */
//     selector: 'app-root-workflow',
//     scripts: [
//     '/spa2/main.js'
//     ],
//     styles: [
//         '/spa2/styles.css'
//     ]
//   },
 // {
 //     name: 'admin-web',
 //     hostParent: '#app-host-container',
 //     hostClass: 'thy-layout',
 //     routerPathPrefix: '/admin',
 //     preload: true,
 //     scripts: [
 //         'admin-web/main.js'
 //     ],
 //     styles: [
 //         'admin-web/styles.css'
 //     ]
 // },
 /*现在 Angular is running in development mode. Call enableProdMode() to enable production mode. 这个日志打了三次
 如果不是直接在子应用的页面刷新进入， 就会报错 找不到selector对应的容器
 */
 {
     name: 'adminweb2',
     hostParent: '#spa',
     hostClass: 'thy-layout',
     routerPathPrefix: '/spa2',
     selector: 'app-root-web',
     preload: true,
     scripts: [
         '/web2/main.js'
     ],
     styles: [
         '/web2/styles.css'
     ]
 }
]);
  this.planet.start();

  }





  listenRouter(): any{
    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((res: any) => {
      console.log(this.active.url, '带参数的路径 即便是hash模式也是 / 开头');
    }) ;
  }
}
